<template>
  <div class="box">
    <el-row>
      <el-form ref="form" label-width="80px">
        <el-col :span="6">
          <el-form-item label="地图类型" prop="region">
            <el-select v-model="mapType" placeholder="请选择地图类型">
              <el-option
                v-for="item in mapTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="经纬度" prop="name">
            <el-input v-model="lngLat" style="width: 80%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="setPoint">撒点</el-button>
          <el-button type="primary" @click="setPoints" :disabled="more"
            >批量撒点测试</el-button
          >
        </el-col>
      </el-form>
    </el-row>
    <div class="box_maps">
      <div class="box_map">
        <div class="map_info">百度地图：{{ transLngLat.bLngLat }}</div>
        <b-map
          @locationInfo="getBmapInfo"
          :lngLat="transLngLat.bLngLat"
          :points="points.pointsB"
          :more="more"
        ></b-map>
      </div>
      <div class="box_map">
        <div class="map_info">高德地图：{{ transLngLat.atLngLat }}</div>
        <a-map
          @locationInfo="getAmapInfo"
          :lngLat="transLngLat.atLngLat"
          :points="points.pointsAT"
          :more="more"
        ></a-map>
      </div>
      <div class="box_map" v-if="false">
        <div class="map_info">腾讯地图：{{ transLngLat.atLngLat }}</div>
        <t-map :points="points.pointsAT"></t-map>
      </div>
    </div>
  </div>
</template>

<script>
import aMap from "@components/aMap.vue";
import bMap from "@components/bMap.vue";
import tMap from "@components/tMap.vue";
import { mapCoordinateConversion } from "@/utils/mapCoordinateConversion.js";
export default {
  name: "home",
  components: {
    aMap,
    bMap,
    tMap,
  },
  data() {
    return {
      mapTypeList: [
        { label: "百度地图", value: "1" },
        { label: "高德地图", value: "2" },
        { label: "腾讯地图", value: "3" },
      ],
      mapType: "1",
      lngLat: "",
      points: {}, //批量点位,示例
      transLngLat: {
        bLngLat: "",
        atLngLat: "",
      },
      more: false,
    };
  },
  methods: {
    setPoint() {
      let lngLat = this.lngLat.split(",");
      this.getTransLngLat(lngLat[0], lngLat[1]);
    },
    setPoints() {
      this.more = true;
      let arr = [
        [121.212191, 45.869806],
        [109.437921, 42.044256],
        [116.723251, 40.377184],
        [96.780581, 36.381902],
        [90.378322, 41.603892],
        [104.948981, 34.148959],
        [103.771554, 31.350932],
        [94.646495, 30.717226],
        [115.325056, 38.204414],
        [112.970202, 23.071577],
        [111.719186, 26.629701],
        [107.966138, 26.23216],
        [109.658689, 23.953821],
        [100.53363, 25.232306],
        [111.056883, 31.729103],
        [114.216188, 30.779888],
        [125.995488, 47.340555],
      ];
      this.points = mapCoordinateConversion(arr, "1");
    },
    //百度坐标
    getBmapInfo(data) {
      console.log("百度：", data);
      this.mapType = "1";
      let { lng, lat } = data;
      this.getTransLngLat(lng, lat);
    },
    //高德坐标
    getAmapInfo(data) {
      console.log("高德：", data);
      this.mapType = "2";
      let { lng, lat } = data;
      this.getTransLngLat(lng, lat);
    },
    //转换坐标
    getTransLngLat(lng, lat) {
      let lngLat = `${lng},${lat}`;
      this.lngLat = lngLat;
      let data = mapCoordinateConversion([[lng, lat]], this.mapType);
      console.log("坐标转换结果：", data);
      let { pointsAT, pointsB } = data;
      let atLng = pointsAT[0][0];
      let atLat = pointsAT[0][1];
      let bLng = pointsB[0][0];
      let bLat = pointsB[0][1];
      this.transLngLat.atLngLat = `${atLng},${atLat}`;
      this.transLngLat.bLngLat = `${bLng},${bLat}`;
    },
  },
};
</script>
<style lang="less" scoped>
.box_maps {
  height: 700px;
  width: 100%;
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
  gap: 20px;
  .box_map {
    position: relative;
    height: 100%;
    flex-grow: 1;
    .map_info {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      background: #fff;
      color: #000;
      padding: 5px 10px;
      white-space: nowrap;
      width: 100%;
    }
  }
}
</style>

